<%@page import="java.util.ArrayList"%>
<%@page import="com.winexpress.sr.SalesReport"%>
<%@page import="java.util.List"%>
<%@page import="com.winexpress.util.SessionAttributes"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/WineXpressClient/resources/css/morris.css" rel="stylesheet" type="text/css" />
        <title>wineXpress online shop</title>        
    </head>
    <body>
        <t:adminNavigation/>
        <br/><br/>
    <center>
        <h2>Sales Report for Year: <%=request.getAttribute("year")%></h2>
        <table class="table table-bordered" style=' width:70%;   ' >
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Sales</th>                    
                </tr>
            </thead>
            <tbody>         
                <%  SalesReport[] list = (SalesReport[]) request.getAttribute("salesByYear");%>
                <% for (int i = 0; i < list.length; i++) {%>
                <tr>
                    <td> <%=list[i].getMth()%> </td>
                    <td><%=list[i].getSales()%></td>      
                </tr>   
                <%}%>
            </tbody>
        </table>
    </center>
    <center>
        <div class="col-sm-10" style="float:right;">            

            <div class="col-md-10">
                <!-- BAR CHART -->
                <div class="box box-success">
                    <div class="box-header">
                        <h3 class="box-title">Sales Bar Chart</h3>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="bar-chart" style="height: 300px;"></div>
                    </div><!-- /.box-body -->
                </div>                    
            </div>
            <div class="col-md-10">
                <!--                LINE CHART -->
                <div class="box box-info">
                    <div class="box-header">
                        <h3 class="box-title">Sales Line Chart</h3>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="line-chart" style="height: 300px;"></div>
                    </div> <!-- /.box-body -->
                </div> <!-- /.box -->

            </div>

        </div>
    </center>
    <!-- Morris.js charts -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="/WineXpressClient/resources/js/morris.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            "use strict";
//            BAR CHART
            var bar = new Morris.Bar({
                element: 'bar-chart',
                resize: true,
                data: [
                    {month: 'Jan', sales:${m1s}},
                    {month: 'Feb', sales:${m2s}},
                    {month: 'Mar', sales:${m3s}},
                    {month: 'Apr', sales:${m4s}},
                    {month: 'May', sales:${m5s}},
                    {month: 'Jun', sales:${m6s}},
                    {month: 'Jul', sales:${m7s}},
                    {month: 'Aug', sales:${m8s}},
                    {month: 'Sep', sales:${m9s}},
                    {month: 'Oct', sales:${m10s}},
                    {month: 'Nov', sales:${m11s}},
                    {month: 'Dec', sales:${m12s}}

                ],
                barColors: ['#f56954'],
                xkey: 'month',
                ykeys: ['sales'],
                labels: ['Sales'],
                hideHover: 'auto'
            });

            //  LINE    CHART
            var line = new Morris.Line({
                element: 'line-chart',
                resize: true,
                data: [
                    {month: 'Jan', sales:${m1s}},
                    {month: 'Feb', sales:${m2s}},
                    {month: 'Mar', sales:${m3s}},
                    {month: 'Apr', sales:${m4s}},
                    {month: 'May', sales:${m5s}},
                    {month: 'Jun', sales:${m6s}},
                    {month: 'Jul', sales:${m7s}},
                    {month: 'Aug', sales:${m8s}},
                    {month: 'Sep', sales:${m9s}},
                    {month: 'Oct', sales:${m10s}},
                    {month: 'Nov', sales:${m11s}},
                    {month: 'Dec', sales:${m12s}}
                ],
                xkey: 'month',
                ykeys: ['sales'],
                labels: ['Sales'],
                lineColors: ['#3c8dbc'],
                parseTime: false
            });
        });
    </script>
    <t:footer/>
</body>
</html>
